<template>
  <!-- 加载进度开始 -->
  <div class="loading" v-if="loadStatus">
      <div class="loading-con">
          <div v-if="loading">
              <div class="load-img">
                  <img src="./img/load.gif" />
              </div> 
              <div class="load-txt">{{loadingTxt}}</div>
          </div>
          <div v-else>
              <div v-if="hasComplete">
                <div class="load-img1">
                    <div id="container">
                        <div id="#div">
                            <img src="./img/path.png" />
                            <div class="div11"></div>
                        </div>
                    </div>	
                </div>
                <div class="load-txt">{{completeTxt}}</div>
              </div>
          </div>
      </div>
  </div>
  <!-- 加载进度结束 --> 
</template>

<style lang="less" scoped>
.loading{
  z-index: 10;
  background-color: rgba(59, 59, 59, 0.39);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  .loading-con {
    width: 32vw;
    height: 32vw;
    overflow: hidden;
    background-color: #1d1b1b;
    opacity: 0.7;
    position: absolute;
    z-index: 102;
    left: 50%;
    top: 50%;
    margin-top: -16vw;
    margin-left: -16vw;
    text-align: center;
    border-radius: 3vw;
    font-size: 3.2vw;
    color: #aeaeae;
    .load-img {
      img {
        width: 7.5vw;
        margin-top: 10vw;
      }
    }
    .load-txt {
      font-size: 3.5vw;
      margin-top: 7%;
    }
    .load-img1 {
      img {
        width: 10vw;
        margin-top: 10vw;
      }
    }
  }
  //打勾动画
  #div {
    position: relative;
  }
  #container div img {
    width: 10vw;
  }
  .div11 {
    position: absolute;
    width: 30vw;
    height: 18vw;
    border-radius: 3vw;
    animation: myfirst 1.5s;
    -moz-animation: myfirst 1.5s; /* Firefox */
    -webkit-animation: myfirst 1.5s; /* Safari 和 Chrome */
    -o-animation: myfirst 1.5s;
    top: 0;
    background-color: #1d1b1b;
    left: 30vw;
  }
  @keyframes myfirst {
    0% {
      left: 0;
    }

    100% {
      left: 30vw;
    }
  }

  @-webkit-keyframes myfirst {
    0% {
      left: 0;
    }

    100% {
      left: 30vw;
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      
    };
  },
  mounted(){
    let that = this;
  },
  props: {
    //是否有加载完成后打钩动画
    hasComplete:{
      type: Boolean,
      hasComplete:false
    },
    //是否显示加载
    loadStatus:{
      type: Boolean,
      loadStatus:false
    },
    //加载是否完成(用来控制显示加载图片)
    loading:{
      type: Boolean,
      loading:true
    },
    //加载进行时文字
    loadingTxt: {
      type: String,
      default: "加载数据中"
    },
    //加载完成时文字
    completeTxt:{
      type: String,
      default: "添加完成"
    }
  }
};
</script>